<template>
  <div style="width:65%">
    <a-menu v-model="currentNav" mode="horizontal">
      <template v-for="(item) in menus">
        <a-menu-item v-if="!item.hidden" :key="item.name" @click="selectItem"><a-icon :type="item.meta.icon" />{{ item.meta.title }}</a-menu-item>
      </template>
    </a-menu>
  </div>
</template>
<script>
export default {
  name: 'TopMenus',
  props: {
    menus: {
      type: Array,
      required: true
    }
  },
  data(){
    return {
      currentNav:[]
    }
  },
  watch:{
      $route(to){
        this.firstToUpper(to);
      }
  },
  created(){
    this.firstToUpper(this.$route);
  },
  methods: {
    firstToUpper(path) {
       return this.currentNav=[path.matched[1].name]
    },
    selectItem(item){
        this.$router.push({name:item.key});
    }
  }
}
</script>
